/*------------------------------------------------------------------
  [Modals]
*/

// This is the main niftyModals container
.modal-container {
	@media @phone{
		padding: 0 15px;
	}
}

.modal-content{
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
	border-radius: 3px;
	overflow: hidden;
	background-color: @light-color;
	color: @text-color;
	border-width: 0;
}

//Modal header
.modal-header{
	border: 0;

	h1, h2, h3, h4, h5, h6{
		display: block;
		margin: 0;
	}

	.close{
		font-size: 26px;
		opacity: 0.4;
		text-shadow: none;

		&:hover{
			opacity: 0.8;
		}
	}
}

//Modal body
.modal-body{
	padding: 30px 20px;

	.i-circle{
		border: 2px solid darken(@light-color, 5.5%);
		border-radius: 50%;
		display: inline-block;
		height: 80px;
		width: 80px;
		margin-bottom: 15px;
		line-height: 105px;

		.icon{
			font-size: 45px;
		}
	}
}

//Modal footer
.modal-footer{
	background-color: darken(@light-color, 1%);
}

//Full Color Alerts
.modal-full-color{	

	//Structural changes
	.modal-content{
		color: @light-color;
		background-color: transparent;
	}

	.modal-header{
		background-color: darken(@primary-color, 4%);

		.close{
			color: @light-color;
			line-height: 40px;
			opacity: 0.6;

			&:hover{
				opacity: 1;
			}
		}
	}

	.modal-body, .modal-footer{
		background-color: @primary-color;
	}
	
	.modal-footer{
		border: 0;
	}

	//Styles
	&-success{		

		.modal-header{
			background-color: darken(@success-color, 4%);
		}

		.modal-body, .modal-footer{
			background-color: @success-color;
		}
	}

	&-info{

		.modal-header{
			background-color: darken(@info-color, 4%);
		}

		.modal-body, .modal-footer{
			background-color: @info-color;
		}
	}

	&-warning{

		.modal-header{
			background-color: darken(@warning-color, 4%);
		}

		.modal-body, .modal-footer{
			background-color: @warning-color;
		}
	}

	&-danger{

		.modal-header{
			background-color: darken(@danger-color, 4%);
		}

		.modal-body, .modal-footer{
			background-color: @danger-color;
		}
	}

	&-dark{

		.modal-header{
			background-color: darken(@dark-color, 2%);
		}

		.modal-body, .modal-footer{
			background-color: @dark-color;
		}
	}
}

//Bootstrap Modals
.modal-full-width{
	width: 90%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;

	@media @small-phone{
		width: 100%;
		margin: 0;
		padding: 10px;
	}
}

//Colored Header Modals
.modal-colored-header{

	//Structure
	.modal-content{
		background-color: transparent;
	}

	.modal-header{
		background-color: @primary-color;
		color: @light-color;
		padding: 20px 15px;

		.close{
			color: @light-color;
			margin-top: 2px;
		}
	}

	.modal-body{
		background-color: @light-color;
	}

	//Style
	&-success{

		.modal-content{

			.modal-header{
				background-color: @success-color;
			}
		}
	}

	&-info{

		.modal-content{

			.modal-header{
				background-color: @info-color;
			}
		}
	}

	&-warning{

		.modal-content{

			.modal-header{
				background-color: @warning-color;
			}
		}
	}

	&-danger{

		.modal-content{

			.modal-header{
				background-color: @danger-color;
			}
		}
	}

	&-dark{

		.modal-content{

			.modal-header{
				background-color: @dark-color;
			}
		}
	}
}

//Dark Flat Side
.modal-dark{

	//Structure
	.modal-content{
		color: @light-color;
		background-color: transparent;
	}

	.modal-header{
		background-color: @primary-color;
		padding: 20px 15px;

		.close{
			color: @light-color;
			margin-top: 2px;
		}
	}

	.modal-body{

		&.form{

			.form-control{
				background-color: @dark-color;
			}
		}
	}

	.modal-body, .modal-footer{
		background-color: @dark-color;
	}

	.modal-footer{
		border: 0;
	}

	//Styles
	&-success{

		.modal-header{
			background-color: @success-color;
		}
	}

	&-info{

		.modal-header{
			background-color: @info-color;
		}
	}

	&-warning{

		.modal-header{
			background-color: @warning-color;
		}
	}

	&-danger{

		.modal-header{
			background-color: @danger-color;
		}
	}

	&-dark{

		.modal-header{
			background-color: darken(@dark-color, 2%);
		}
	}
}

@media @phone{

	.modal-dialog{
		min-width: 100%;
		padding: 0 15px;
		margin: 0;
	}
}

.modal-overlay{
	z-index: @zindex-modal;
}

.am-modal-open{
	overflow-x: visible;
}